<template>
	<view>
		<view class="loadingstyle"  v-if="!loading">
			<u-loading-page loading-color="#DCB490" :loading="true" loading-text="火速加载中..."></u-loading-page>
		</view>
		<view v-if="loading">
			<!-- 视频 -->
			<u-swiper :list="detailmsg.images_text" keyName="url" :autoplay="false"  height="300" imgMode="aspectFit"
				@change="e => currentNum = e.current" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ detailmsg.images_text.length }}</text>
				</view>
			</u-swiper>
			<view class="flexbetween mainpadding">
				<view class="le radius">
					<image class="radius" :src="detailmsg.thumb_image" mode=""></image>
				</view>
				<view class="rt">
					<view class="title">{{detailmsg.name}} </view>
					<view class="shujjs">{{detailmsg.sub_name}}</view>
					<view class="qianshu"> ￥{{detailmsg.goods_price}}</view>
					<view class="flexbetween">
						<view class="shoujian">已售：{{detailmsg.salesnum}}件</view>
						<view class="benshubox flexleft">
							<view class="huangse" @click="reduceprice">
								<image class="xiao" src="../../static/image/system/jian.png" mode=""></image>
							</view>
							<view class="shuliang">{{num}}</view>
							<view class="huangse" @click="addprice">
								<image class="xiaos" src="../../static/image/system/jia.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 书籍简介 -->
			<view class="jieshao mainpadding2">
				<view class="shuji ">书籍简介 </view>
				<u-parse :content="detailmsg.content"></u-parse>
			</view>
			<!-- 书籍推荐 -->
			<view class="shujitj mainpadding">
				<view class="tuijian ">书籍推荐 </view>
				<view class=" flexbetween flex_wrap">
					<view class="margin_top box_shado radius" v-for="item in list.data" @click="jumpdetail(item)">
						<view class="topimage radius">
							<image :src="item.thumb_image" mode=""></image>
						</view>
						<view class="mainpadding">
							<view class="strongtext">{{item.name}}</view>
							<view class="flexbetween margin_top">
								<view class="lableprice">￥{{item.goods_price}}</view>
								<view class="smalltext">已售：{{item.actual_num}}件</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottombox flexbetween ">
				<view class="flexleft">
					<view class="allqian">￥{{allprice}}</view>
					<view class="benshu"> 共{{num}}本</view>
				</view>
				<view class="goumaibtn" @click="zhifu">去购买</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currentNum: 0,
				listid: "",
				detailmsg: {},
				num: 1,
				list: {
					data: []
				},
				// 加载中
				loading:false
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		onShow() {
			this.init()
			this.tuijian()
		},
		computed:{
			allprice(){
				return this.detailmsg.goods_price * this.num
			}
		},
		methods: {
			// 获取当前书籍详情
			init() {
				httpRequest.request('/api/goods/goods_detail', 'POST', {
					goods_id: this.listid
				}).then(resp => {
					this.detailmsg = resp.data
					this.loading = true
				})
			},
			tuijian() {
				httpRequest.request('/api/goods/recommend_goods_lists', 'POST', {
					goods_id: this.listid,
					sort_name: "random",
					pagesize: 7
				}).then(resp => {
					this.list.data = resp.data
				})
			},
			// 加商品
			addprice() {
				this.num++
				// this.allprice = this.detailmsg.goods_price*this.num
			},
			// 减商品
			reduceprice() {
				if (this.num >= 1) {
					this.num--
					// this.allprice = this.detailmsg.goods_price*this.num
				}
			},
			// 跳转详情
			jumpdetail(item) {
				uni.navigateTo({ //资料
					url: "/pages/mercharts/shujixq?id=" + item.id
				})
			},
			zhifu() {
				// 如果用户未登录点击去登陆
				if(!httpRequest.checkIsLogin()){
					httpRequest.doLogin();
					return false;
				}
				if(this.num==0){
					httpRequest.toast('请添加商品到下方购物车再进行购买')
					return false
				}
				httpRequest.request('/api/order/sure', 'POST', {
					type:"detail",
					ids: this.listid,
					goods_sku_id: this.detailmsg.spec[0].id,
					goods_num:this.num
				}).then(resp => {
					uni.navigateTo({
						url: '/pages/mercharts/zhifu?msg='+encodeURIComponent(JSON.stringify(resp.data))
					})
				})
				// let msg={
				// 	detailmsg:this.detailmsg,
				// 	allprice:this.allprice,
				// 	num:this.num
				// }
				// uni.navigateTo({
				// 	url: '/pages/mercharts/zhifu?msg='+encodeURIComponent(JSON.stringify(msg))
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shujitj {
		padding-bottom: 210rpx;
	}

	.bottombox {
		padding: 20rpx 30rpx 60rpx;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(51, 51, 51, 0.1000);
	}

	.goumaibtn {
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 334rpx;
		height: 89rpx;
		background: #DCB490;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(51, 51, 51, 0.0500);
		border-radius: 50rpx;
	}

	.benshu {
		margin-left: 30rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.allqian {
		font-size: 48rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.tuijian {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.shujitup {
		height: 350rpx;
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.xiangxijs {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
	}

	.shuji {
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.xiao {
		width: 17rpx;
		height: 3rpx;
		position: absolute;
		left: 8rpx;
		top: 15rpx;
	}

	.xiaos {
		width: 16rpx;
		height: 16rpx;
		position: absolute;
		left: 24%;
		top: 24%;
	}

	.huangse {
		position: relative;
		width: 35rpx;
		height: 32rpx;
		background: #DCB490;
		border-radius: 4rpx;
	}

	.shuliang {
		margin: 0 30rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #DCB490;
	}

	.shoujian {
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.qianshu {
		margin: 55rpx 0 10rpx;
		font-size: 48rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FF3939;
	}

	.shujjs {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.rt {
		flex: 1.8;
		width: 70%;
		margin-left: 25rpx;
	}

	.title {
		margin: 20rpx 0;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.le {
		// width: 236rpx;
		flex: 1;
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	//轮播视频图片样式
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>
